<template>
  <div class="news">
    <div class="news-header">
      <el-card class="drug-head-contatiner-title2">
        <el-form :inline="true" :model="params" class="demo-form-inline">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="params.startTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="params.endTime"
              type="datetime"
              placeholder="--请选择--"
            />
          </el-form-item>
          <el-form-item label="消息类型" prop="msgType">
            <el-select v-model="params.msgType" placeholder="--请选择--">
              <el-option
                v-for="item in msgTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="消息内容">
            <el-input v-model="params.content" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="news-list">
      <el-row>
        <el-col>
          <!-- 消息列表 -->
          <el-table :data="planList" border stripe>
            <!-- 索引列 -->
            <el-table-column
              type="index"
              label="#"
              :index="indexMethod"
            ></el-table-column>
            <el-table-column
              prop="typeName"
              width="150"
              label="类型"
            ></el-table-column>
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column
              prop="receiveTime"
              label="接收时间"
              width="300"
              :formatter="timeFormat"
            ></el-table-column>
            <el-table-column prop="state" label="是否发送">
              <template #default="scope">
                <span v-if="scope.row.state == 1">已发送</span>
                <span v-else>未发送</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="9">
          <el-pagination
            background
            layout="total,prev, pager, next"
            v-model:total="params.total"
            v-model:page-size="params.pageSize"
            v-model:current-page="params.page"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import moment from 'moment';
import { ref, onBeforeMount, reactive } from 'vue';
import { getNewsList } from '@/network/news';
// import { ElMessage, ElMessageBox } from "element-plus";
//时间格式化
function timeFormat(row, column, v, i) {
  return moment(String(v)).format('YYYY-MM-DD hh:mm:ss');
}
const rTime = (time) => {
  // var json_date = new Date(date).toJSON();
  // return new Date(new Date(json_date) + 8 * 3600 * 1000)
  //   .toISOString()
  //   .replace(/T/g, " ")
  //   .replace(/\.[\d]{3}Z/, "");
  var date = new Date(time);
  var y = date.getFullYear();
  var m = date.getMonth() + 1;
  m = m < 10 ? '0' + m : m;
  var d = date.getDate();
  d = d < 10 ? '0' + d : d;
  var h = date.getHours();
  h = h < 10 ? '0' + h : h;
  var minute = date.getMinutes();
  minute = minute < 10 ? '0' + minute : minute;
  var s = date.getSeconds();
  s = s < 10 ? '0' + s : s;
  return y + '-' + m + '-' + d + ' ' + h + ':' + minute + ':' + s;
};

//分页索引
const indexMethod = (index) => {
  return index + (params.value.page - 1) * params.value.pageSize + 1;
};
//搜素参数
let params = ref({
  startTime: `${new Date(new Date().getTime() - 7 * 24 * 60 * 60 * 1000)}`,
  endTime: `${new Date()}`,
  msgType: '1',
  content: '',
  page: 1,
  pageSize: 10,
  total: 0,
});
const msgTypeList = reactive([
  {
    value: '1',
    label: '系统消息',
    disabled: false,
  },
  {
    value: '2',
    label: '药品消息',
    disabled: false,
  },
  {
    value: '3',
    label: '订单消息',
    disabled: false,
  },
]);
//提交
const onSubmit = () => {
  params.value.page = 1;
  result();
};
//重置
const onReset = () => {
  params.value.msgType = '';
  params.value.content = '';
  params.value.page = 1;
  result();
};
let planList = ref([]);
const result = async () => {
  let data = {
    startTime: rTime(params.value.startTime),
    endTime: rTime(params.value.endTime),
    msgType: params.value.msgType,
    content: params.value.content,
    page: params.value.page,
    pageSize: params.value.pageSize,
  };
  await getNewsList(data).then((res) => {
    planList.value = res.data;
    params.value.total = res.total;
  });
};
onBeforeMount(() => {
  result();
});
const handleCurrentChange = () => {
  result();
};
</script>
<style lang="scss" scoped>
.news {
  margin: 14px 15px 14px;
  .news-header {
    .drug-head-contatiner-title2 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }
  .news-list {
    margin-top: 14px;
  }
}
</style>
